<!DOCTYPE html>
<html lang="en">
<head>
    <!--#include file="ssi/head.html"-->
    <meta name="description" content="CSS压缩、美化和净化工具" />
    <meta keywords="CSS压缩、美化和净化工具" />
    <title>CSS压缩、美化和净化工具</title>
    <!--#include file="ssi/link.html"-->

    <style>
    textarea{width:900px;height: 420px;font: 12px/1.6em 'Lucida Console', 'monospace', 'Consolas';letter-spacing: 1px}
    textarea::-webkit-scrollbar{width:10px;height:10px;}
    textarea::-webkit-scrollbar-button:vertical:increment{background-color:transparent;}
    textarea::-webkit-scrollbar-track:enabled{background-color:rgba(113,112,107,0.1);-webkit-border-radius:5px;}
    textarea::-webkit-scrollbar-thumb:vertical{height:50px;background-color:rgba(0,0,0,.2);-webkit-border-radius:5px;}
    textarea::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:rgba(0,0,0,.2);-webkit-border-radius:5px;}
    #code{
        padding: 10px;
        width: 100%;
    }
    .btn-box{
        width: 80%;
        margin: 20px auto;
        overflow: hidden;
        text-align: center;
    }
    .btn-box .btn{
        width: 20%;
    }
    </style>
</head>
<body>
    <!--#include file="ssi/nav.html"-->
    <!--#include file="ssi/top-head.html"-->

    <section class="container">
        <textarea id='code'  spellcheck="false">
/*   美化：格式化代码，使之容易阅读           */
/*   净化：将代码单行化，并去除注释           */
/*   压缩：将代码最小化，加快加载速度         */
/*   以下是演示代码                           */

/*reset begin*/
body, h1, h2, h3, h4, h5, h6, hr, p,dl, dt, dd, ul, ol, li,form, fieldset, legend, button,th, td,img{border:medium none;margin: 0;padding: 0;}
body,button{font:12px/1.5 Helvetica,\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,Arial;}
input, label, img, th {vertical-align: middle;}
body{background:#F1F2F6;}
img{border:0}
ol,li{list-style:none;}
a{text-decoration: none;}
a:active{background: none}
a{outline: none;}
        </textarea>

        <div class="btn-box">
            <button type="button" class="btn btn-primary btn-lg" id='encode'>压缩</button>
            <button type="button" class="btn btn-warning btn-lg" id='decode'>美化</button>
            <button type="button" class="btn btn-success btn-lg" id='purify'>净化</button>
            <button type="button" class="btn btn-danger btn-lg" id='empty'>清空</button>
        </div>
    </section>

    <!--#include file="ssi/footer.html"-->
    <script>
    var oEncodeBtn = document.getElementById('encode');
    var oDecodeBtn = document.getElementById('decode');
    var oPurify = document.getElementById('purify');
    var oCode = document.getElementById('code');
    var oEmpty = document.getElementById('empty');
    oEmpty.onclick = function() {
        oCode.value = ''
    };

    oEncodeBtn.onclick = function() {//压缩代码
        var val = oCode.value;
        val = val.replace(/\/\*(.|\n)*?\*\//g,'');              //去除注释
        val = val.replace(/^\s+|\s+$/g,'');                     //清除首尾空格
        val = val.replace(/(:)\s+/g,'$1');                      //去除 冒号后多个空格              如 width:  100px  => width:100px
        val = val.replace(/\s{2,}/g,' ');                       //去除 多余空格2个以上             如 margin: 10px   20px  30px  => margin:10px 20px 30px
        val = val.replace(/,\s+|\s+,/g,',');                    //去除 多个样式共享时的多余空格    如 h1,  h2  , h3  =>h1,h2,h3  
        val = val.replace(/;{2,}|;\s+/g,';');                   //去除 多个分号或分号后面多余空格  如 width:200px;;  height:100px  => width:200px;height:100px 
        val = val.replace(/\s*\{\s*/g,'{');                     //去除 选择符后面多余空格          如 div { height:100px}   => div{height:100px}
        val = val.replace(/\s*}\s*/g,'}');                      //去除 选择器前面多余空格          如 div{height:100px}  a{}   => div{height:100px}a{}
        val = val.replace(/[\n\t\f\r]/g,'');                    //去除换行,制表符,分页符,回车  
        val = val.replace(/;}/g,'}');                           //去除 元素样式的最后分号          如 div{height:100px;} => div{height:100px}
        oCode.value = val;
    };

    oPurify.onclick = function() { //净化工具;
        oEncodeBtn.click();
        var val = oCode.value;
        val = val.replace(/\}/g,'}\n');
        oCode.value = val;
    };

    oDecodeBtn.onclick = function() { //格式化代码
        var val = oCode.value;
        val = val.replace(/(\*\/)\s+(\w)/g,'$1\n$2'); //格式化注释后的多余空格                 
        val = val.replace(/(:)\s+/g,'$1');      //格式化冒号间多余空格                
        val = val.replace(/,\s+|\s+,/g,',');    //格式化逗号间多余空格                
        val = val.replace(/;{2,}|;\s+/g,';');   //格式化分号后多余字符                
        val = val.replace(/;}/g,'}');           //去除最后一个分号
        val = val.replace(/\s*\{\s*/g,' {\n\t');//格式化左{ 
        val = val.replace(/\s*}\s*/g,'\n}\n');  //格式化左}
        val = val.replace(/\s*;\s*/g, ';\n\t'); //格式化属性
        oCode.value = val;                      
    };
    </script>
     <script>
    // 每一页都需要配置的信息
    var pageInfo = {
      toolLogo: 'img/icon-css-format.png',
      toolName: document.title
    }
  </script>
    <!--#include file="ssi/script.html"-->
</body>
</html>